<template>
<!-- 部门 -->
  <v-select-table-page v-model="customValue" :api="customUrl" responseData="Departs" showValue="Name"
                       :column="column" :multiple="multiple" :showHeader="showHeader"
                       :clickValue="clickValue" :queryValue="queryValue" ref="SelectProjectTeam" v-bind="$attrs"
                       @selectChange="selectChange"></v-select-table-page>
</template>

<script>
import vSelectTablePage from '@/components/element/vSelectT/vSelectTablePage'
import deparatmentApi from '@/api/organizationApi/deparatmentApi.js'
export default {
  name: "SelectDepart",
  components: {
    vSelectTablePage
  },
  props: {
    value: {
      type: [String, Number, Array],
      default: function () {
        return undefined
      }
    },
    column: {
      type: [Array, Object, String],
      default: function () {
        return [
          {
            field: 'Name',
          }
        ]
      }
    },
    multiple : {
      type: Boolean,
      default: function () {
        return false
      }
    },
    showHeader: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    clickValue: {
      type: [String, Array],
      default: function () {
        return 'Id'
      }
    },
    queryValue: {
      type: Object,
      default: function () {
        return {
          id: this.$route.params.id,
        }
      }
    },
    url: {
      type: Object,
      default: function () {
        return undefined
      }
    }
  },
  data () {
    return {
      projectTeamApi: deparatmentApi
    }
  },
  mounted () {
    this.$refs.SelectProjectTeam.getTableData()
  },
  computed: {
    customUrl () {
      return this.url || this.projectTeamApi
    },
    customValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
  },
  methods: {
    selectChange (value) {
      this.$emit('selectChanged', value)
    }
  }
}
</script>

<style scoped>

</style>
